<template>
  <div style="display: flex">
    <el-card shadow="hover" style="width: 250px;height: 250px;">
      <span>最近一次考试：</span>
      <br>
      <span style="display:block;text-align: center">xxx考试名称 </span>
      <span>考试时间：</span>
      <br>
      <span style="display:block;text-align: center">xxx考试时间 </span>
    </el-card>
    <div id="main" style="width: 350px;height: 300px;"></div>
    <div id="sub" style="width: 350px;height: 300px;"></div>
  </div>
  <div style="display: flex">
    <el-card shadow="hover" style="width: 250px;height: 250px;">
      <span>单科成绩历史分析</span>
      <el-select v-model="type" clearable placeholder="语文"
                 @change="courseSearch()" style="margin:0 20px 5px 0;width:100px" >
        <el-option v-for="(item,index) in courseData"  :key="index" :label="item.type" :value="item.type">
        </el-option>
      </el-select>
    </el-card>


  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "Score_Analyse_s",

  data(){
    return{
      options:[
        {value: '1', label: '语文'},
        {value: '2', label: '数学'},
        {value: '3', label: '英语'},
        {value: '4', label: '后台取'}
      ]
    }
  },
  created() {
    // this.load()
  },
  methods:{
    //获取下拉框中内容
    courseSearch(){
      let _this = this
      this.service.get("/")
          .then(res =>
          {
            //请求返回的数据
            //赋值
            _this.couseData = res.data
            console.log(this.couseData)
          }).catch((error) =>{
        console.log(error);
      });
    },
  },
  mounted() {
    const chartDom1 = document.getElementById('main');
    const chartDom2 = document.getElementById('sub');
    const myChart1 = echarts.init(chartDom1);
    const myChart2 = echarts.init(chartDom2);
    const option1 = {
      title: {
        text: '主科分数',
        left: 'center'
      },
      xAxis: { name: '科目',data:["语文","数学","英语"]},
      yAxis: { name:'分数' ,max:150},
      series: [
        {
          type: 'bar',
          data:[89,114,122],
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }
      ]
    };
    const option2 = {
      title: {
        text: '副科分数',
        left: 'center'
      },
      xAxis: { name: '科目',data:["物理","化学","生物"]},
      yAxis: { name:'分数' ,max:100},
      series: [
        {
          type: 'bar',
          data:[77,75,65],
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }
      ]
    };
    //从后台拿数据，语数英的分数以及副科科目和分数
    // option1.series.data=res.data
    //option2.xAxis.data=res.data.x
    //option2.series.data=res.data
    option1 && myChart1.setOption(option1);
    option2 && myChart2.setOption(option2);
  }
}
</script>

<style scoped>

</style>
